Tablas en HTML - CodeStart

¿Qué son las tablas en HTML?

Las tablas permiten mostrar datos en filas y columnas. Son esenciales para representar información de manera organizada, como listas de precios, horarios, inventarios, etc.

Las tablas están formadas por varias etiquetas clave:

<table>: Define el contenedor de la tabla.
<tr>: Define una fila dentro de la tabla.
<th>: Define las celdas de encabezado (generalmente en negrita y centradas).
<td>: Define las celdas de datos dentro de una fila.
<thead>: Define el encabezado de la tabla.
<tbody>: Define el cuerpo de la tabla donde van los datos.

Sintaxis básica de una tabla:

Para crear una tabla básica en HTML, utilizamos las etiquetas anteriores. Aquí tienes un ejemplo básico:


<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>Ciudad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>28</td>
      <td>Lima</td>
    </tr>
    <tr>
      <td>Luis</td>
      <td>34</td>
      <td>Bogotá</td>
    </tr>
  </tbody>
</table>

Ejemplo de tabla con datos:

Aquí te mostramos un ejemplo real de una tabla con datos de personas:

Nombre	Edad	Ciudad
Ana	28	Lima
Luis	34	Bogotá

Consejos para mejorar el diseño de tus tablas:

El diseño adecuado de una tabla es crucial para que los datos sean legibles. Aquí tienes algunos consejos:

Asegúrate de que el encabezado sea claro y describa el contenido de las columnas.
Usa colores suaves para los encabezados, como el bg-blue-200, para resaltar y facilitar la lectura.
Considera usar bordes de celdas con un color sutil para mejorar la estructura.
Alinea adecuadamente el texto y usa nowrap para evitar que el texto largo se divida.